<template>
  <div class="about-overlay" @click="closeAbout">
    <div class="about-modal" @click.stop>
      <!-- 关闭按钮 -->
      <button class="close-button" @click="closeAbout" aria-label="关闭">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M15.898 4.045c.78-.78 2.047-.78 2.827 0s.78 2.047 0 2.827L11.827 13.77c-.78.78-2.047.78-2.827 0L2.102 6.872c-.78-.78-.78-2.047 0-2.827s2.047-.78 2.827 0L10 9.116l5.898-5.071z"
          />
        </svg>
      </button>

      <!-- 应用信息 -->
      <div class="about-header">
        <img src="../../assets/APP/Logo.png" alt="XLChat" class="about-logo" />
        <h2 class="about-title">XLChat</h2>
        <p class="about-version">版本 1.0.0</p>
      </div>

      <!-- 应用描述 -->
      <div class="about-content">
        <p class="about-description">
          XLChat 是一款现代化的聊天应用，致力于为用户提供简洁、高效、安全的即时通讯体验。
        </p>

        <div class="about-features">
          <h3>主要特性</h3>
          <ul>
            <li>🚀 快速响应的用户界面</li>
            <li>🔒 端到端加密保护隐私</li>
            <li>💬 支持文字、图片、文件传输</li>
            <li>🌙 深色/浅色主题切换</li>
            <li>📱 跨平台支持</li>
          </ul>
        </div>

        <div class="about-info">
          <div class="info-item">
            <span class="info-label">开发者:</span>
            <span class="info-value">XLChat Team</span>
          </div>
          <div class="info-item">
            <span class="info-label">技术栈:</span>
            <span class="info-value">Electron + Vue 3 + TypeScript</span>
          </div>
          <div class="info-item">
            <span class="info-label">许可证:</span>
            <span class="info-value">MIT License</span>
          </div>
        </div>
      </div>

      <!-- 底部按钮 -->
      <div class="about-footer">
        <button class="confirm-button" @click="closeAbout">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  close: []
}>()

const closeAbout = (): void => {
  emit('close')
}
</script>

<style scoped>
.about-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

.about-modal {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 32px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: slideIn 0.3s ease-out;
}

.close-button {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.close-button:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #333;
}

.about-header {
  text-align: center;
  margin-bottom: 24px;
}

.about-logo {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 12px;
}

.about-title {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin: 0 0 8px 0;
}

.about-version {
  color: #666;
  font-size: 16px;
  margin: 0;
}

.about-content {
  margin-bottom: 24px;
}

.about-description {
  color: #555;
  line-height: 1.6;
  margin-bottom: 24px;
  font-size: 16px;
}

.about-features h3 {
  color: #333;
  font-size: 18px;
  margin-bottom: 12px;
  font-weight: 600;
}

.about-features ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}

.about-features li {
  padding: 8px 0;
  color: #555;
  font-size: 15px;
}

.about-info {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 600;
  color: #333;
}

.info-value {
  color: #666;
}

.about-footer {
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 20px;
}

.confirm-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.confirm-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.confirm-button:active {
  transform: translateY(0);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
</style>
